<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The <code>&lt;md-tabs&gt;</code> directive serves as the container for 1..n <code>&lt;md-tab&gt;</code> child directives to
produces a Tabs components. In turn, the nested <code>&lt;md-tab&gt;</code> directive is used to specify a tab
label for the <strong>header button</strong> and a [optional] tab view content that will be associated with
each tab button.</p>
<p>Below is the markup for its simplest usage:</p>
 <hljs lang="html">
 <md-tabs>
   <md-tab label="Tab #1"></md-tab>
   <md-tab label="Tab #2"></md-tab>
   <md-tab label="Tab #3"></md-tab>
 </md-tabs>
 </hljs>

<p>Tabs supports three (3) usage scenarios:</p>
<ol>
<li>Tabs (buttons only)</li>
<li>Tabs with internal view content</li>
<li>Tabs with external view content</li>
</ol>
<p><strong>Tab-only</strong> support is useful when tab buttons are used for custom navigation regardless of any
other components, content, or views.</p>
<p><i><b>Note:</b> If you are using the Tabs component for page-level navigation, please take a look
at the <a ng-href="./api/directive/mdNavBar">NavBar component</a> instead as it can handle this
case a bit more natively.</i></p>
<p><strong>Tabs with internal views</strong> are the traditional usages where each tab has associated view
content and the view switching is managed internally by the Tabs component.</p>
<p><strong>Tabs with external view content</strong> is often useful when content associated with each tab is
independently managed and data-binding notifications announce tab selection changes.</p>
<p>Additional features also include:</p>
<ul>
<li>Content can include any markup.</li>
<li>If a tab is disabled while active/selected, then the next tab will be auto-selected.</li>
</ul>
<h3 id="explanation-of-tab-stretching">Explanation of tab stretching</h3>
<p>Initially, tabs will have an inherent size.  This size will either be defined by how much space is needed to accommodate their text or set by the user through CSS.  Calculations will be based on this size.</p>
<p>On mobile devices, tabs will be expanded to fill the available horizontal space.  When this happens, all tabs will become the same size.</p>
<p>On desktops, by default, stretching will never occur.</p>
<p>This default behavior can be overridden through the <code>md-stretch-tabs</code> attribute.  Here is a table showing when stretching will occur:</p>
<table>
<thead>
<tr>
<th><code>md-stretch-tabs</code></th>
<th>mobile</th>
<th>desktop</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td>stretched</td>
<td>---</td>
</tr>
<tr>
<td><code>always</code></td>
<td>stretched</td>
<td>stretched</td>
</tr>
<tr>
<td><code>never</code></td>
<td>---</td>
<td>---</td>
</tr>
</tbody>
</table>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <hljs lang="html">
<md-tabs md-selected="selectedIndex" >
  <img ng-src="img/angular.png" class="centered">
  <md-tab
      ng-repeat="tab in tabs | orderBy:predicate:reversed"
      md-on-select="onTabSelected(tab)"
      md-on-deselect="announceDeselected(tab)"
      ng-disabled="tab.disabled">
    <md-tab-label>
      {{tab.title}}
      <img src="img/removeTab.png" ng-click="removeTab(tab)" class="delete">
    </md-tab-label>
    <md-tab-body>
      {{tab.content}}
    </md-tab-body>
  </md-tab>
</md-tabs>
</hljs>
  
  </section>
  
  <div class="api-param-section">
    <h2>
      
        Attributes
      
    </h2>
    <div class="api-param-table">
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-selected
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-integer">integer</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-integer">integer</code></td>
        <td class="description">
          <p>Index of the active/selected tab</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-ink
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>If present, disables ink ripple effects.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-ink-bar
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>If present, disables the selection ink bar.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-align-tabs
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Attribute to indicate position of tab buttons: <code>bottom</code> or <code>top</code>; default is <code>top</code></p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-stretch-tabs
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Attribute to indicate whether or not to stretch tabs: <code>auto</code>, <code>always</code>, or <code>never</code>; default is <code>auto</code></p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-dynamic-height
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, the tab wrapper will resize based on the contents of the selected tab</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-border-bottom
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>If present, shows a solid <code>1px</code> border between the tabs and their content</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-center-tabs
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, tabs will be centered provided there is no need for pagination</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-pagination
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, pagination will remain off</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-swipe-content
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, swipe gestures will be enabled for the content area to jump between tabs</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-enable-disconnect
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, scopes will be disconnected for tabs that are not being displayed.  This provides a performance boost, but may also cause unexpected issues and is not recommended for most users.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-autoselect
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When present, any tabs added after the initial load will be automatically selected</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-select-click
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When enabled, click events will not be fired when selecting tabs</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

    </div>
  </div>
  


  
</div>


</div>
